body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: rgb(243, 195, 156);
    background-image: radial-gradient(closest-side, rgb(243, 195, 156), rgba(235, 105, 78, 0)),
        radial-gradient(closest-side, rgb(243, 172, 157), rgba(243, 11, 164, 0)),
        radial-gradient(closest-side, rgb(240, 153, 159), rgba(254, 234, 131, 0)),
        radial-gradient(closest-side, rgb(238, 140, 161), rgba(170, 142, 245, 0)),
        radial-gradient(closest-side, rgb(233, 114, 168), rgba(248, 192, 147, 0));
    background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
    background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;
    background-repeat: no-repeat;
   display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    width: 60vw;
    height: 80vh;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    .content-wrapper {
        width: 100%;
        height: 100%;
        background-color: rgb(249, 207, 216);
        background-image: radial-gradient(closest-side, rgb(245, 189, 214), rgba(235, 105, 78, 0)),
            radial-gradient(closest-side, rgb(243, 172, 157), rgba(243, 11, 164, 0)),
            radial-gradient(closest-side, rgb(240, 153, 159), rgba(254, 234, 131, 0)),
            radial-gradient(closest-side, rgb(202, 202, 202), rgba(170, 142, 245, 0)),
            radial-gradient(closest-side, rgb(233, 114, 168), rgba(248, 192, 147, 0));
        background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
        background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;
        background-repeat: no-repeat;
        border-radius: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            width: 30%;
            height: 100%;
            border-radius: 30px;
            position: relative;
            background-image: linear-gradient(
                rgb(230, 79, 144),
                rgb(238, 113, 132),
                rgb(245, 150, 109),
                rgb(255, 174, 53)
            );
            .curve {
                position: absolute;
                .path {
                    transform: skew(0deg, -20deg) translate(-10px, 20px);
                }
            }
            .left-img {
                height: 90%;
                position: absolute;
                top: 10%;
                animation-name: PAnimation;
                animation-direction: alternate;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                animation-duration: 3s;
            }
        }
        .right {
            width: 60%;
            height: 100%;
            float: right;
            padding: 60px;
            box-sizing: border-box;
            position: relative;
            display: flex;
            align-items: center;
            margin: -20px 0;
            .form {
                width: 100%;
                .title {
                    font-family: "Calisto MT", courier, monospace;
                    font-size: 30px;
                    font-weight: 600;
                    span:last-child {
                        background: linear-gradient(
                            to right,
                            rgb(230, 79, 144) 0%,
                            rgb(238, 113, 132) 50%,
                            rgb(245, 150, 109) 100%
                        );
                        background-clip: text;
                        color: transparent;
                    }
                }
                .other-login {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 30px;
                    .login-item {
                        width: 150px;
                        height: 50px;
                        border: 1px solid #000;
                        border-radius: 10px;
                        vertical-align: middle;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;                        
                        position: relative;
                        z-index: 2;
                        transition: .2s;
                        background-color: rgb(235, 205, 211);
                        .login-img {
                            width: 40px;
                            height: 40px;
                            vertical-align: middle;
                            margin-right: 2px;
                        }
                        &:hover {
                            color: #fff;
                            &::before {
                                content: '';
                                display: inline-block;
                                width: 100%;
                                height: 55px;
                                color: rgb(113, 114, 119);
                                position: absolute;
                                top: 1px;
                                left: 3px;
                                z-index: -1;
                                background-color: #000;
                                border-radius: 12px;
                            }
                        }
                    }
                }
                .other-login-text {
                    text-align: center;
                }
                .form-inputs {
                    .input-wrapper {
                        position: relative;
                        margin: 50px 0 0 0;
                        .inputs {
                            width: 98%;
                            height: 80px;
                            box-sizing: border-box;
                            position: relative;
                            border: 0;
                            border-radius: 8px;
                            outline: none;
                            z-index: 2;
                            margin: 0px 0 0 6px;
                            border: 2px solid rgb(25, 25, 25);
                            font-family: "Calisto MT", courier, monospace;
                            font-size: 30px;
                            padding: 0 10px;
                            box-sizing: border-box;
                        }
                        &::before {
                            content: '';
                            display: inline-block;
                            width: 100%;
                            height: 96px;
                            color: rgb(113, 114, 119);
                            z-index: 1;
                            position: absolute;
                            top: 1px;
                            left: 3px;
                            background-color: #000;
                            border-radius: 12px;
                        }
                    }
                    .form-inputs-text {
                        margin: 30px 10px;
                        span:nth-child(2) {
                            color: rgb(246, 113, 170);
                            cursor: pointer;
                        }
                    }
                    .login-btn-wrapper {
                        width: 30%;
                        height: 50px;
                        position: relative;
                        float: right;
                        .login-btn {
                            width: 97%;
                            height: 65px;
                            border: 0;
                            border-radius: 8px;
                            position: relative;
                            outline: none;
                            z-index: 2;
                            border: 2px solidrgb(25, 25, 25);
                            cursor: pointer;
                            font-family: "Calisto MT", courier, monospace;
                            font-size: 30px;
                            background-color: #fff;
                        }
                        &::before {
                            content: '';
                            display: inline-block;
                            width: 100%;
                            height: 75px;
                            color: rgb(113, 114, 119);
                            z-index: 1;
                            position: absolute;
                            top: 1px;
                            left: -3px;
                            background-color: #000;
                            border-radius: 12px;
                        }
                    }
                }
            }
        }
    }
}

@keyframes PAnimation {
    0% {
        transform: translate(0%, -3%);
    }
    100% {
        transform: translate(0%, 3%);
    }
}
